<template>
  <div class="full-container" @click="showToolbar">
    <reader-head :bookId="booksId" v-show="isShowToolbar"></reader-head>
    <reader-bottom :bookId="booksId" v-show="isShowToolbar" @notifyHideToolbar="notifyHideToolbar"></reader-bottom>
    <reader-setting :isShowToolbar="!isShowToolbar" @notifyChangeBottom="notifyChangeBottom"></reader-setting>
    <reader-content :booksId="booksId" :chapterId="chapterId"></reader-content>
  </div>
</template>

<script>
import ReaderHead from "./components/Head";
import ReaderBottom from "./components/Bottom";
import ReaderSetting from "./components/Setting";
import ReaderContent from "./components/Content";

import {saveHistory} from 'api/HistoryApi'
import {getBooksShelfList} from 'api/BooksShelfApi'


export default {
  name: "ReaderIndex",
  components: {
    ReaderHead,
    ReaderBottom,
    ReaderSetting,
    ReaderContent
  },
  props: {
    booksId: String,
    chapterId: String
  },
  data() {
    return {
      isShowToolbar: false
    };
  },
  methods: {
    showToolbar() {
      this.isShowToolbar = !this.isShowToolbar;
    },
    notifyHideToolbar() {
      this.isShowToolbar = false;
    },
    notifyChangeBottom(tag) {
      this.isShowToolbar = !tag;
    },
    saveHistory () {
      saveHistory({
        bookId: this.booksId,
        readChapterId: this.chapterId
      }).then(res => {
        // if(res.meta.success) {
        //   console.info('ok');
        // }
      });
    }
  },
  created () {
    this.saveHistory();
  },
  watch: {
    $route(to, from) {
      this.isShowToolbar = false
      
      this.booksId = to.params.booksId;
      this.chapterId = to.params.chapterId;
      this.saveHistory()
    }
  }
};
</script>

<style lang="stylus" scoped></style>
